<template>
  <div class="content">
    <div class="header">
      <div class="block">
        <el-avatar shape="square" :size="100" :src="circleUrl"></el-avatar>
      </div>
      <span>科室： <span>五官科</span></span>
    </div>
    <div class="doctorList">
      <DoctorList
        class="list"
        v-for="(item, i) in list"
        :key="i"
        :item="item.date"
        :afternoon.sync="item.afternoon"
        :morning.sync="item.morning"
        :night.sync="item.night"
        :index="i"
        @doctorListShow="getUserData"
      ></DoctorList>
    </div>
    <div>
      <el-button type="primary" @click="runUserData">确定修改</el-button>
    </div>
  </div>
</template>

<script>
import { api_doctor_get_dn_dayline,api_doctor_edit_dn_dayline } from "@/apis/nurse";
import DoctorList from "@/components/doctorlist.vue";
export default {
  components: {
    DoctorList,
  },
  data() {
    return {
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      list: [],
    };
  },
  methods: {
    async getWorkforce() {
      let id = JSON.parse(localStorage.userInfo).id

      let res = await api_doctor_get_dn_dayline({ id });
      console.log(res);
    

      this.list = JSON.parse(res.data.data[0].date);
    },
    async runUserData() {
      let id = JSON.parse(localStorage.userInfo).id

      let res = await api_doctor_edit_dn_dayline({ id ,newdate:this.list});

   
    },
    getUserData(val, index) {
      if (val == 1) {
        this.list[index].morning=1
      } else if (val == 2) {
 this.list[index].afternoon=1
      }else{
 this.list[index].night=1
      }
    },
  },
  created() {
    this.getWorkforce();
  },
};
</script>

<style lang="less" scoped>
.content {
  .header {
    display: flex;
    margin-bottom: 10px;
    align-items: center;
    /deep/ .el-avatar--square {
      margin-right: 20px;
      border-radius: 12px;
    }
  }
  .doctorList {
    display: flex;
    flex-wrap: wrap;
    .list {
      width: 14%;
    }
  }
}
</style>